<!--
 * @Date: 2023-10-17 17:35:40
 * @Auth: 463997479@qq.com
 * @LastEditors: 463997479@qq.com
 * @LastEditTime: 2024-02-23 15:36:33
 * @FilePath: \ztc-web\src\views\map\mapTab.vue
-->

<template>
  <div style="padding: 10px 20px">
    <d-table-search
      :columns="columns"
      :request="handleRequest"
      :header-cell-style="{
        background: '#f5f7fa',
      }"
      :pagination="{
        background: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        small: 'small',
        pageSizes: [10, 200, 300, 400],
      }"
      :hasSearch="true"
      :has-page="false"
      border
    >
      <template #searchData="{ search }">
        <el-space>
          <el-form-item prop="isInclude">
            <el-switch
              v-model="search.isInclude"
              class="ml-2"
              inline-prompt
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
              active-text="包含下级"
              inactive-text="不包含下级"
            />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="deptId">
            <el-tree-select
              v-model="search.deptId"
              :data="deptOptions"
              :props="{ label: 'label', children: 'children' }"
              :render-after-expand="false"
              node-key="id"
              :check-strictly="true"
              :check-on-click-node="true"
              :expand-on-click-node="false"
              placeholder="请选择行政区"
            />
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="areatypeId">
            <el-select
              v-model="search.areatypeId"
              placeholder="行政区划类型"
              clearable
            >
              <el-option label="地市" value="1" />
              <el-option label="区县" value="2" />
              <el-option label="镇街" value="3" />
            </el-select>
          </el-form-item>
        </el-space>
        <el-space>
          <el-form-item prop="gridtypeno">
            <el-select
              v-model="search.gridtypeno"
              placeholder="电子围栏类型"
              clearable
            >
              <el-option label="地市电子围栏" value="01" />
              <el-option label="区县电子围栏" value="02" />
              <el-option label="镇街电子围栏" value="03" />
            </el-select>
          </el-form-item>
        </el-space>
      </template>

      <template #gridDeptname="data">
        <div>{{ data.data.gridDeptname }}</div>
      </template>
      <template #geometry="data">
        <div>{{ data.data.geometry.type }}</div>
      </template>
      <template #gridState="data">
        <div>{{ data.data.gridState === 1 ? "启用" : "停用" }}</div>
      </template>

      <template #action="data">
        <!-- <el-button link type="primary">operation add</el-button>
        <el-button link type="warning">peration edit</el-button> -->
      </template>
    </d-table-search>
  </div>
</template>

<script setup>
import DTableSearch from "@/components/Table/tableList.vue";
import { getGridInfoList } from "@/api/map/index";
import { deptTreeSelect } from "@/api/system/user";

const columns = [
  {
    prop: "gridDeptname",

    label: "名称",
    slotName: "gridDeptname",
  },
  {
    prop: "gridGridtypename",
    label: "所属区域",
  },
  {
    prop: "geometry",
    label: "类型标记",
    slotName: "geometry",
  },
  {
    prop: "gridState",
    label: "状态",
    slotName: "gridState",
  },

  {
    prop: "gridCreateTime",
    label: "创建时间",
  },
  {
    prop: "gridNo",
    label: "编号",
    render: () => {
      return "";
    },
  },
  {
    prop: "操作",
    label: "操作",
    slotName: "action",
    width: 200,
  },
];
const deptOptions = ref(undefined);
function getDeptTree() {
  deptTreeSelect().then((response) => {
    deptOptions.value = response.data;
  });
}
const handleRequest = (params, done) => {
  console.log(params);
  getGridInfoList(params).then((res) => {
    console.log(res.data);
    done({ data: res.data, total: 0 });
  });
};
getDeptTree();
</script>
